<template>
    <view class="detai-container">
		<!-- 上面的 x 和 标题 -->
		<!-- <view class="up-edit-container">
			<view class="cuowu-icon-container iconfont icon-x" @click="closeBtn"></view>
			<view class="edit-title-container">编辑</view>
		</view> -->
		<top-title-text @closeBtn="closeBtn" :titleText="titleText"></top-title-text>

		<!-- scroll-view 解决弹框中内容过多时无法上下滑动问题 -->
		<scroll-view scroll-y="true" style="height: 1200rpx;width: 100%;">
			<!-- 中间的明细信息 -->
			<view class="inner-container">
				<name-icon-color-budget ref="nameIconColorBudget" @openIconDialog="changeFlag('isShowIcon', true)" @openColorDialog="changeFlag('isShowColor', true)" :accountbook="accountBook" @changeAccountbook="changeAccountbook"></name-icon-color-budget>
				<!-- 明细第五个 分类 -->
				<view class="inner-contrainer-container" v-if="type == 'update'">
					<view class="name-container-left">
						分类
					</view>
					<view class="">
					</view>
				</view>
				<!-- 子分类信息 -->
				<view class="category-container" v-if="type == 'update'">
					<!-- 上方标题 -->
					<view class="catetory-title-container" @click="showCategory('payCategoryFlag')" >
						<view class="left-catetory-title">支出</view>
						<view :class="['right-catetory-icon', 'iconfont', 'icon-icon_on_the_down', {'rotate' : payCategoryFlag}, {'no-rotate' : !payCategoryFlag}]"></view>
					</view>
					<!-- 下面分类盒子 （包含左边图标，名字，右边的预算，右箭头） -->
					<view class="catetory-content-container" v-if="payCategoryFlag">
						<category ref="payCategory" :categoryList="accountBook.payCategoryList" @editCategoryDetail="openCategoryDetailDialog(arguments, 'pay')" @deleteCategory="deleteCategory(arguments, 'payCategory')"></category>
					</view>
				</view>
				<view class="category-container" v-if="type == 'update'">
					<!-- 上方标题 -->
					<view class="catetory-title-container" @click="showCategory('incomeCategoryFlag')">
						<view class="left-catetory-title">收入</view>
						<view :class="['right-catetory-icon', 'iconfont', 'icon-icon_on_the_down', {'rotate' : incomeCategoryFlag}, {'no-rotate' : !incomeCategoryFlag}]"></view>
					</view>
					<!-- 下面分类盒子 （包含左边图标，名字，右边的预算，右箭头） -->
					<view class="catetory-content-container" v-if="incomeCategoryFlag">
						<category ref="incomeCategory" :categoryList="accountBook.incomeCategoryList" @editCategoryDetail="openCategoryDetailDialog(arguments, 'income')" @deleteCategory="deleteCategory(arguments, 'incomeCategory')"></category>
					</view>
				</view>
				<!-- 添加分类组件按钮 -->
				<view class="add-category-container" @click="openCategoryDetailDialog"  v-if="type == 'update'">
					<view class="add-category-left-icon iconfont icon-tianjia"></view>
					<view class="add-category-right-content">添加分类</view>
				</view>
				<!-- 确定删除按钮 -->
				<view class="btn-container">
					<confirm-btn :showDeleteFlag="type == 'update'" @confirm="confirmData" @deleteBtn="deleteAccountBook"></confirm-btn>
				</view>
			</view>
		</scroll-view>
		<!-- 颜色组件弹框 -->
		<u-popup :show="isShowColor" :round="20"  mode="center" @close="changeFlag('isShowColor', false)" @open="changeFlag('isShowColor', true)">
			<color :selectIndex="accountBook.colorIndex" @selectColor="selectColor"></color>
		</u-popup>
		<!-- 图标组件弹框 -->
		<u-popup :show="isShowIcon" :round="20"  mode="center" @close="changeFlag('isShowIcon', false)" @open="changeFlag('isShowIcon', true)">
			<my-icon @selectIcon="selectIcon" :iconIndex="accountBook.iconIndex" :categoryIndex="accountBook.categoryIndex" :iconCategorysList="iconCategorysList"></my-icon>
		</u-popup>
		<!-- 分类明细组件弹框 -->
		<u-popup :show="isShowCategoryDetail" :round="20" mode="bottom" @close="changeFlag('isShowCategoryDetail', false)" @open="changeFlag('isShowCategoryDetail', true)">
			<category-detail ref="categoryDetail" @categoryDetailConfirm="categoryDetailConfirm" @closeCategoryDetail="changeFlag('isShowCategoryDetail', false)" :categoryDetail="categoryDetail"></category-detail>
		</u-popup>
	</view>
</template>

<script>
	import color from '@/components/color/color/color.vue';
	import myIcon from '@/components/icon/my-icon.vue';
	import confirmBtn from '@/components/confirm-btn/confirm-btn';
	import nameIconColor from '@/components/name-icon-color/name-icon-color.vue';
	import nameIconColorBudget from '@/components/name-icon-color-budget/name-icon-color-budget';
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	import categoryDetail from '@/components/category-detail/category-detail.vue';
	import category from '@/components/category/category';
	import {checkStrType} from '@/util/regular/regular.js';
    export default {
		components: {
			color, category, confirmBtn, myIcon, nameIconColor, categoryDetail, topTitleText, nameIconColorBudget
		},
		props: {
			type: {																			// 类型 insert时不显示分类，update显示
				type: String,
				default: 'insert',
			},
			titleText: {																	// 标题
				type: String,
				default: '新增',
			},
			accountBook: {																	// 账本明细（名称，图标，颜色，预算，分类集合，图标所属分类id，图标索引）
				type: Object,
				default: {},
			},
		},
		watch: {
			// TODO 这里需要修改 在data中定义一个变量，然后接收这里json转换后的值，然后页面上使用的是data中新定义的值
			// accountBook: {
			// 	handler: function (old, newObj) {
			// 		this.accountBook = JSON.parse(JSON.stringify(old));
			// 	},
			// 	deep: true,
			// 	immediate: true,
			// }
		},
        data() {
            return {
				categoryDetail: {},															// 分类详情
				categoryIndex: -1,															// 选择图标所在的分类索引
				iconIndex: -1,																// 所选的图标索引
				accountbookNameLength: 0,													// 账本名字的长度（中文，英文，数字都不一样）
				accountbookbudgetLength: 0,													// 账本名字的长度（中文，英文，数字都不一样）
				iconCategorysList: this.iconCategoryList,									// main.js中声明的图标集合
				incomeCategoryFlag: true,													// 用于切换支出图标的上下
				payCategoryFlag: true,														// 用于切换收入图标的上下
				selectColorIndex: 0,														// 测试使用，一开始选中的颜色
				selectIconIndex: 0,															// 测试使用，一开始选中的图标
				isShowColor: false,															// 展示颜色选择组件
				isShowIcon: false,															// 展示图标选择组件
				isShowCategoryDetail: false,													// 展示图标选择组件
				bgcColor: this.themeYellowColor,
				payCategoryList: [],															// 测试使用-支出 分类集合（正式来自账本的属性）
				incomeCategoryList: [],															// 测试使用-收入 分类集合（正式来自账本的属性）
            }
        },
		methods: {
			/**
			 * 删除账本
			 */
			deleteAccountBook() {
				// console.log(this.accountBook, "账本对象");
				this.$emit("deleteAccountBook", this.accountBook);
			},
			/** 删除回调
			 * @param {Object} argument 组件传递来的参数
			 * @param {Object} obj ref对象 删除后刷新
			 */
			deleteCategory(argument, obj) {
				this.$emit('deleteCategory', argument[0]);
			},
			/**
			 * 刷新里面组件数据
			 */
			refreshComponents() {
				this.$refs.payCategory.$forceUpdate();
				this.$refs.incomeCategory.$forceUpdate();
			},
			/**
			 * 确定
			 */
			categoryDetailConfirm(categoryDetail) {
				this.categoryDetail = categoryDetail;
				console.log(this.categoryDetail, "categoryDetail");
				var that = this;
				this.confirm(this.categoryDetail.id ? '修改' : '新增', '确定保存吗?', () => that.$emit('categoryDetailConfirm', that.categoryDetail));
				;
			},
			/**
			 * 确定回调
			 */
			confirmData() {
				debugger
				var that = this;
				this.confirm('新增', '确定保存吗?', () => that.$emit('accountBookConfirm', that.accountBook));
			},
			/** 根据名字切换状态
			 * @param {Object} name 名字
			 * @param {Object} flag 状态
			 */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			/** 选中颜色回调
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectColor(item, index) {
				this.accountBook.bgcColor = item.bgcColor;
				// 因为第一个是加进去的，所以需要将索引
				this.accountBook.colorIndex = index;
				this.$refs.nameIconColorBudget.test();
				// 刷新，否则选中有值后不会显示
				this.$refs.nameIconColorBudget.$forceUpdate();
				// 因为第一个是加进去的，所以需要将索引
				this.selectColorIndex = index;
				this.changeFlag('isShowColor', false);
			},
			/** 当名称，图标，颜色，预算发生改变后回调
			 * @param {Object} obj 账本对象
			 */
			changeAccountbook(obj) {
				this.accountBook.name = obj.name;
				this.accountBook.budget = obj.budget;
				console.log(this.accountBook);
			},
			/**
			 * 点击图标不展示分类
			 */
			showCategory(name){
				this[name] = !this[name];
			},
			/**
			 * x图标点击事件
			 */
			closeBtn() {
				this.$emit("closeEditDialog");
			},
			/** 点击账本编辑事件
			 * @param {Object} item 账本数据
			 */
			editAccountBook(item) {
				this.$emit("editAccountBook", item);
			},
			/**
			 * 点击选择颜色事件
			 */
			openColorDialog() {
				this.openColor();
			},
			/**
			 * 打开颜色选择组件
			 */
			openColor() {
				this.isShowColor = true;
			},
			/**
			 * 关闭颜色选择组件
			 */
			closeColor() {
				this.isShowColor = false;
			},
			/** 选择图标函数
			 * @param {Object} index1 分类索引
			 * @param {Object} index2 分类下图标索引
			 */
			selectIcon(index1, index2) {
				this.categoryIndex = index1;
				this.iconIndex = index2;
				this.accountBook.categoryIndex = index1;
				this.accountBook.iconIndex = index2;
				this.accountBook.icon = this.iconCategoryList[index1].list[index2].icon;
				this.$refs.nameIconColorBudget.$forceUpdate();
				this.changeFlag('isShowIcon', false);
				console.log(index2, 'iconIndex');
				console.log(index1, 'categoryIndex');
				console.log(this.accountBook.icon, 'this.accountbook.icon');
			},
			/**
			 * 数据新增或者删除变化后刷新组件
			 */
			updateComponents() {
				this.$refs.nameIconColorBudget.$forceUpdate();
			},
			/**
			 * 打开图标弹框事件
			 */
			openIconDialog() {
				this.openIcon();
			},
			/**
			 * 打开图标选择组件
			 */
			openIcon() {
				this.isShowIcon = true;
			},
			/**
			 * 关闭图标选择组件
			 */
			closeIcon() {
				this.isShowIcon = false;
			},
			/**  打开分类明细弹框事件
			 * @param {Object} argument 包含了item, index 使用索引来获取
			 * @param {Object} type 类型
			 */
			openCategoryDetailDialog(argument, type) {
				if (type == 'pay') {
					this.categoryDetail = this.accountBook.payCategoryList[argument[1]];
				}else if (type == 'income') {
					this.categoryDetail = this.accountBook.incomeCategoryList[argument[1]];
				} else {
					this.categoryDetail = {};
				}
				this.changeFlag('isShowCategoryDetail', true);
			},
		},
		mounted() {
			// console.log("12321" + this.bgcColor)
			// console.log("222   " + this.themeYellowColor)
			// this.payCategoryList = [];
			// this.incomeCategoryList = [];
			// for (var i = 0; i < 5; i++) {
			// 	this.payCategoryList.push({
			// 		id: i + 1,
			// 		name: "测试" + i + 1,
			// 		icon: "icon-qianbao",
			// 		bgcColor: this.deepColorArr[i],
			// 		budget: i < 3 ? undefined : '1000'
			// 	})
			// 	this.incomeCategoryList.push({
			// 		id: i + 1,
			// 		name: "测试" + i + 1,
			// 		icon: "icon-qianbao",
			// 		bgcColor: this.deepColorArr[i],
			// 		budget: i < 3 ? undefined : '1000'
			// 	})
			// }
			// console.log(this.accountBook, "this.accountBook");
			// this.$refs.nameIconColorBudget.$forceUpdate();
			console.log("进来了1", this.accountbook)
			this.accountbook = JSON.parse(JSON.stringify(this.accountBook));
			console.log("进来了2", this.accountbook)
		},
    }
</script>

<style lang="scss">

	// 覆盖input标签的样式
	::deep .uni-input-input {
		width: 100%;
		height: 100%;
	}


	// 上面的 x 和 标题
	.detai-container {
		width: 100%;
		// min-height: 1000rpx;
		height: 100%;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		// background-color: white;

		// 错误图标，编辑标题 盒子
		.up-edit-container {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 20rpx;
			position: relative;
			box-sizing: border-box;

			// 错误图标
			.cuowu-icon-container {
				width: 10%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 30rpx;
				color: #8b929d;
				position: absolute;
			}

			.edit-title-container {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 35rpx;
				font-weight: bold;
			}
		}

		// 明细盒子
		.inner-container {
			width: 100%;
			height: 300rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			// 里面子项
			.inner-contrainer-container {
				width: 100%;
				height: 25%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 左边
				.name-container-left {
					width: 20%;
					height: 100%;
					font-size: 30rpx;
					font-weight: 100rpx;
					color: $fontColorPurple;
					line-height: 75rpx;
				}

				// 右边
				.name-container-right {
					padding: 0rpx 20rpx;
					height: 65%;
					font-size: 20rpx;
					font-weight: bold;
					background-color: #e6e6e6;
					border-radius: 30rpx;
					font-size: 30rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				// 图标盒子
				.icon-container-right {
					width: 60rpx;
					height: 75%;
					background-color: #e6e6e6;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 40rpx;
					color: #989898;
					font-weight: bold;
				}

				// 颜色选择盒子
				.color-container-right {
					width: 60rpx;
					height: 75%;
					border-radius: 50%;
				}
			}

			// 收入支出盒子
			.category-container {
				width: 100%;
				min-height: 75rpx;

				.catetory-title-container {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.right-catetory-icon {
						width: 50rpx;
						height: 50rpx;
						background-color: $themeLightPurpleColor;
						color: $themePurpleColor;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			// 添加分类盒子
			.add-category-container {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				// 左边图标
				.add-category-left-icon {
					font-size: 60rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	// 向下箭头的判断样式
	.rotate {
		transition: all .5s;
	}

	.no-rotate {
		transform:rotate(-180deg);
		transition: all .5s;
	}
</style>
